<template>
  <common-layout>
    <div class="top">
      <div class="header">
        <img alt="logo" class="logo" src="@/assets/img/logo.png" />
      </div>
      <div class="desc">峰云慧远程监控与智能运维平台</div>
    </div>
    <div class="loginBox" v-if="type==1">
      <div class="left">
        <div class="tit">用户登录</div>
        <a-form @submit="onSubmit" :form="form">
          <a-alert type="error" :closable="true" v-show="error" :message="error" showIcon style="margin-bottom: 24px;background-color: firebrick;border: 0" />
          <div style="color: #A7B2B8;margin-bottom: 5px">手机号</div>
          <a-form-item>
            <a-input
              autocomplete="autocomplete"
              size="large"
              class="inputs"
              placeholder="请输入手机号"
              v-decorator="['telephone', {rules: [{ required: true, message: '请输入手机号', whitespace: true}]}]"
            >
            </a-input>
          </a-form-item>
          <div style="color: #A7B2B8;margin-bottom: 5px">密码</div>
          <a-form-item>
            <a-input
              size="large"
              placeholder="请输入密码"
              autocomplete="autocomplete"
              type="password"
              class="inputs"
              v-decorator="['password', {rules: [{ required: true, message: '请输入密码', whitespace: true}]}]"
            >
            </a-input>
          </a-form-item>

          <div @click="type=3" style="color: #D01124;float: right;cursor: pointer;display: flex">忘记密码</div>
          <a-button :loading="logging" style="width: 100%;margin-top: 14px;height: 50px;background-color: #2F6FC1;border: 0" size="large" htmlType="submit" type="primary">登录</a-button>
          <div style="cursor:pointer;text-align: center;margin-top: 15px;color: #D01124" @click="type=2">
            前往注册>
          </div>
        </a-form>
      </div>
      <div class="right">
        <img src="@/assets/img/loginRight.png">
      </div>
    </div>
    <div class="loginBox" v-if="type==2">
      <div class="left">
        <div class="tit">用户注册</div>
        <a-form @submit="onSubmit" :form="form">
          <a-alert type="error" :closable="true" v-show="error" :message="error" showIcon style="margin-bottom: 24px;background-color: firebrick;border: 0" />
          <a-form-item>
            <a-input
              autocomplete="autocomplete"
              size="large"
              class="inputs"
              placeholder="请输入用户名"
              v-decorator="['username', {rules: [{ required: true, message: '请输入用户名', whitespace: true}]}]"
            >
            </a-input>
          </a-form-item>
		  <!--
          <a-form-item>
            <a-input
              autocomplete="autocomplete"
              size="large"
              class="inputs"
              placeholder="验证码"
              v-decorator="['verificationCode', {rules: [{ required: true, message: '请输入手机验证码', whitespace: true}]}]"
            >
            </a-input>
            <div @click="sendVerificationCode" class="btns">{{countdown > 0?countdown+'秒':'发送验证码'}}</div>
          </a-form-item>
		  -->
          <a-form-item>
            <a-input
              size="large"
              placeholder="请输入密码"
              autocomplete="autocomplete"
              type="password"
              class="inputs"
              v-decorator="['password', {rules: [{ required: true, message: '请输入密码', whitespace: true}]}]"
            >
            </a-input>
          </a-form-item>
          <a-form-item>
            <a-input
              size="large"
              placeholder="再次输入登录密码"
              autocomplete="autocomplete"
              type="password"
              class="inputs"
              v-decorator="['passwordAgain', {rules: [{ required: true, message: '再次输入登录密码', whitespace: true}]}]"
            >
            </a-input>
          </a-form-item>
          <a-form-item>
            <a-input
              autocomplete="autocomplete"
              size="large"
              class="inputs"
              placeholder="请输入手机号"
              v-decorator="['telephone', {rules: [{ required: true, message: '请输入手机号', whitespace: true}]}]"
            >
            </a-input>
          </a-form-item>
          <a-form-item>
            <a-input
              autocomplete="autocomplete"
              size="large"
              class="inputs"
              placeholder="请输入验证码"
              v-decorator="['verificationcode', {rules: [{ required: true, message: '请输入验证码', whitespace: true}]}]"
            >
            </a-input>
          </a-form-item>
          <a-button :loading="logging" style="width: 100%;margin-top: 14px;height: 50px;background-color: #2F6FC1;border: 0" size="large" htmlType="submit" type="primary">注册</a-button>
          <div style="cursor:point;text-align: center;margin-top: 15px;color: #D01124" @click="type=1">
            已有帐号，前往登录>
          </div>
        </a-form>
      </div>
      <div class="right">
        <img src="@/assets/img/loginRight.png">
      </div>
    </div>
    <div class="loginBox" v-if="type==3">
      <div class="left">
        <div class="tit">忘记密码</div>
        <a-form @submit="onSubmit" :form="form">
          <a-alert type="error" :closable="true" v-show="error" :message="error" showIcon style="margin-bottom: 24px;background-color: firebrick;border: 0" />
          <a-form-item>
            <a-input
              autocomplete="autocomplete"
              size="large"
              class="inputs"
              placeholder="请输入手机号"
              v-decorator="['telephone', {rules: [{ required: true, message: '请输入手机号', whitespace: true}]}]"
            >
            </a-input>
          </a-form-item>
		  <!--
          <a-form-item>
            <a-input
              autocomplete="autocomplete"
              size="large"
              class="inputs"
              placeholder="验证码"
              v-decorator="['verificationCode', {rules: [{ required: true, message: '请输入手机验证码', whitespace: true}]}]"
            >
            </a-input>
            <div @click="sendVerificationCode" class="btns">{{countdown > 0?countdown+'秒':'发送验证码'}}</div>
          </a-form-item>
		  -->
          <a-form-item>
            <a-input
              size="large"
              placeholder="请输入密码"
              autocomplete="autocomplete"
              type="password"
              class="inputs"
              v-decorator="['password', {rules: [{ required: true, message: '请输入密码', whitespace: true}]}]"
            >
            </a-input>
          </a-form-item>
          <a-form-item>
            <a-input
              size="large"
              placeholder="再次输入登录密码"
              autocomplete="autocomplete"
              type="password"
              class="inputs"
              v-decorator="['passwordAgain', {rules: [{ required: true, message: '再次输入登录密码', whitespace: true}]}]"
            >
            </a-input>
          </a-form-item>
          <a-button :loading="logging" style="width: 100%;margin-top: 14px;height: 50px;background-color: #2F6FC1;border: 0" size="large" htmlType="submit" type="primary">确定</a-button>
          <div style="text-align: center;margin-top: 15px;color: #D01124" @click="type=1">
            已有帐号，前往登录>
          </div>
        </a-form>
      </div>
      <div class="right">
        <img src="@/assets/img/loginRight.png">
      </div>
    </div>
  </common-layout>
</template>

<script>
	import { message } from 'ant-design-vue';
import CommonLayout from '@/layouts/CommonLayout'
// import {getRoutesConfig} from '@/services/user'
import {login,register,updatePassword} from '@/services/login'
// import {setAuthorization} from '@/utils/request'
// import {loadRoutes} from '@/utils/routerUtil'
import {mapMutations} from 'vuex'
export default {
  name: 'Login',
  components: {CommonLayout},
  data () {
    return {
      logging: false,
      error: '',
      countdown:0,
      type:1,
      form: this.$form.createForm(this)
    }
  },
  computed: {
    systemName () {
      return this.$store.state.setting.systemName
    }
  },
  methods: {
    ...mapMutations('account', ['setUser', 'setPermissions', 'setRoles']),
    sendVerificationCode() {
		 const username = this.form.getFieldValue('name')
		 console.log("username===")
		 console.log(username)
		 if(!username){
			 this.error="请先输入手机号";
			 return;
		 }else{
			 this.error="";
		 }
      if(this.countdown>0){
        return;
      }
      this.countdown = 60;
      const timer = setInterval(() => {
        if (this.countdown > 0) {
          this.countdown--;
        } else {
          clearInterval(timer);
        }
      }, 1000);
    },
    onSubmit (e) {
		let that = this
      e.preventDefault()
      this.form.validateFields((err) => {
        if (!err) {
          this.logging = true
          const telephone = this.form.getFieldValue('telephone')
          const password = this.form.getFieldValue('password')
		  console.log("type==="+this.type)
          // this.$router.push('/dashboard/workplace')
		  if(this.type===1){  //登录
			  let params = {
			    telephone: telephone,
			    password: password
			  }
			  login(params).then(this.afterLogin)
		  }else if(this.type===2){  //注册
		   const passwordAgain = this.form.getFieldValue('passwordAgain')
		   if(!password===passwordAgain){
		   			   message.info("两次输入的密码不一致")
		   			   return
		   }
			  let params = {
			    telephone: telephone,
			    password: password,
				sendVerificationCode:1111   //暂时默认
				//sendVerificationCode: this.form.getFieldValue('sendVerificationCode')
			  }
			  register(params).then(function(e){
				 
				  message.info(e.msg)   //提示添加是否成功				  
				  that.logging=false   //加载动作停止
				  if(e.info==="ok"){    //添加成功转向登录页
					  that.type=1
				  }
			  })
		  }else{    //修改密码
		   const passwordAgain = this.form.getFieldValue('passwordAgain')
		   console.log(password)
		   console.log(passwordAgain)
		   console.log(password!==passwordAgain)
		   if(password!==passwordAgain){
			   message.info("两次输入的密码不一致")
			    that.logging=false   //加载动作停止
			   return
		   }
			  let params = {
			    telephone: telephone,
			    password: password,
				sendVerificationCode:1111   //暂时默认
			  	//sendVerificationCode: this.form.getFieldValue('sendVerificationCode')
			  }
			  updatePassword(params).then(function(e){
			  				 
			  				  message.info(e.msg)   //提示添加是否成功				  
			  				  that.logging=false   //加载动作停止
			  				  if(e.info==="ok"){    //添加成功转向登录页
			  					  that.type=1
			  				  }
			  })
		  }
           
        }
      })
    },
    afterLogin(res) {
      this.logging = false
      // const loginRes = res.data
      if (res.status == 200) {
        // const {token,account,userHeadUrl,userName} = res.data
        // let user = {
        //   account:account,
        //   userHeadUrl:userHeadUrl,
        //   userName:userName
        // }
        console.log(res.user.username)
        this.setUser(res.user.username)
        sessionStorage.setItem('TOKEN',res.token)
        // this.setPermissions(permissions)
        // this.setRoles(roles)
        // setAuthorization({token: loginRes.data.token, expireAt: new Date(loginRes.data.expireAt)})
        // // 获取路由配置
        this.$router.push('/dashboard/workplace')
        // myMenuAndBtn().then(result => {
        //   const {data} = result
        //   this.setMenu(data)
        //   sessionStorage.setItem('MENU',JSON.stringify(data))
        //   this.$router.push('home/index')
        //   this.$message.success(res.msg, 3)
        // })
      } else {
        this.error = res.message
      }
    },
  }
}
</script>

<style lang="less" scoped>
.inputs{
  background-color: #F0F3F6;
  height: 45px;
  border: 1px solid #F0F3F6;
  color: #000;
}
.btns{
  width: 100px;
  height: 30px;
  background: #AC2222;
  border-radius: 6px;
  text-align: center;
  line-height: 30px;
  font-size: 13px;
  color: #fff;
  position: absolute;
  right: 10px;
  top: -7px;
}
.loginBox{
  width: 80%;
  margin: 0 auto;
  border-radius: 24px;
  height: 75%;
  margin-top: 60px;
  overflow: hidden;
  .left{
    width: 50%;
    background: #fff;
    height: 100%;
    padding: 30px 80px;
    box-sizing: border-box;
    float: left;
    .tit{
      font-size: 28px;
      font-weight: bold;
      color: #000;
      text-align: center;
      margin-bottom: 20px;
    }
  }
  .right{
    width: 50%;
    background: #EDF0F5;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    float: left;
    img{
      width: 90%;
    }
  }
}
  .common-layout{
    background-image: url("../../assets/img/loginBg.png");
    background-position-y: 0px;
    background-color:#FAF8F8;
    .top {
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      .header {
        a {
          text-decoration: none;
        }
        .logo {
          width: 100px;
          height: 65px;
          margin-right: 16px;
        }
        .title {
          font-size: 33px;
          color: @title-color;
          font-family: 'Myriad Pro', 'Helvetica Neue', Arial, Helvetica, sans-serif;
          font-weight: 600;
          position: relative;
        }
      }
      .desc {
        font-size: 14px;
        color: #fff;
        font-size: 46px;
        font-weight: bold;
      }
    }
    .login{
      width: 368px;
      margin: 0 auto;
      @media screen and (max-width: 576px) {
        width: 95%;
      }
      @media screen and (max-width: 320px) {
        .captcha-button{
          font-size: 14px;
        }
      }
      .icon {
        font-size: 24px;
        color: @text-color-second;
        margin-left: 16px;
        vertical-align: middle;
        cursor: pointer;
        transition: color 0.3s;

        &:hover {
          color: @primary-color;
        }
      }
    }
  }
</style>
